<template>
	<view id="xiangqing">
		<view class="top_x">
			<view>
				<view>
					<p class='zb'>{{datalists.name}}</p>
					<p>授权店</p>
				</view>
				<view>
					<image class="ims" :src="datalists.img1[0]" @click="clickImgB" mode="">
					</image>
				</view>
			</view>
			<view>
				<span class="xinxi">
					<view style="display: flex;margin-bottom: 10px;">
						<!-- <p class='iconfont sse'>&#xe60c;</p> -->
						<!-- <p class='jz'>{{datalists.juli}}km</p> -->
					</view>
					<view style="display: flex;">
						<p class='iconfont sse'>&#xe8c4;</p>
						<p class='jz'>{{datalists.adds}}</p>
					</view>
				</span>
			</view>
			<view class="dibudaohang" @click='updates(datalists)'>
				<view class="sz">店铺信息管理</view>
			</view>
		</view>





		<view class="main_x">
			<view class="top_main">
				门店有售（仅支持线下门店购买）
			</view>
			<view class="foot_main">
				<view class="dataimgs">
					<view class="kuangimgs">
						<view class="kuang" v-for="items in imgs">
							<image :src="items" @click="clickImg" mode=""></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="foot_x">
			<view class="liaojie">
				了解雾化器
			</view>
			<view class="liaojie" @click="gethref(iis.id)" v-for="iis in datalist" :key='iis.id'>
				<view class="nbu">
					<i>{{iis.name}}</i>
					<i>></i>
				</view>
			</view>
			<view class="liaojiec nbu">
				<i @click='gethrefgd(datalist)'>查看更多</i>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				datalist: {},
				phone: 11,
				imgs: [
					'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
					'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
					'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
					'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
					'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
					'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
					'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg'
				],

				datalists: {

				}
			}
		},
		onLoad(option) {
			console.log(option.phone);
			this.phone = option.phone
			this.loditem(this.phone)
		},
		
		
		onUnload() {
			//#ifdef MP-WEIXIN
			wx.reLaunch({
				url: '../../index/index'
			})
			//#endif
		},

		methods: {
			updates(ids) {
				var item = JSON.stringify(ids);
				uni.navigateTo({
					url: '../updates/updates?item=' + item,
					// pages/index/pages/xinagqingye/xiangqingye
					fail: (res) => {
						console.log(res) //打印错误信息
					}
				});
			},

			loditem(phone) {
				this.$http.selectxq()
					.then(res => {
						console.log('我请求的数据');
						console.log(res.data);
						this.datalist = res.data
						console.log(this.datalist);
					})

				//数据内容
				let data = {
					phone: phone
				}
				this.$http.getphone(data).then(res => {
					console.log("数据如下：");
					this.datalists = res.data
					console.log(this.datalists);
				})
			},

			clickImg() {
				wx.previewImage({
					urls: this.imgs, //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
					current: '', // 当前显示图片的http链接，默认是第一个
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {},
				})
			},
			clickImgB() {
				wx.previewImage({
					urls: this.datalists.img1, //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
					current: '', // 当前显示图片的http链接，默认是第一个
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {},
				})
			},
			goPhoneBtn(val) {
				console.log("电话" + val);
				uni.makePhoneCall({
					// 手机号
					phoneNumber: val,
					// 成功回调
					success: (res) => {
						console.log(res);
					},
					// 失败回调
					fail: (res) => {
						console.log(res);
					}
				});
			},

			asb() {
				wx.getSetting({
					success(res) {
						const writePhotosAlbum = res.authSetting['scope.userLocation']
						if (!writePhotosAlbum) { //检查用户是否授权
							openSetting()
						} else {

						}
					}
				})
				const openSetting = () => {
					wx.openSetting({
						success(res) {
							console.log(res)
						}
					})
				}
			},



			gethref(ids) {
				var item = JSON.stringify(ids);
				uni.navigateTo({
					url: '../liaojiewhuaqi/liaojiewhuaqi?item=' + item,
					// pages/index/pages/xinagqingye/xiangqingye
					fail: (res) => {
						console.log(res) //打印错误信息
					}
				});
				console.log('您掉的');
			},




			gethrefgd(ids) {
				uni.navigateTo({
					url: '../chakangd/chakangd',
					fail: (res) => {
						console.log(res) //打印错误信息
					}
				});
			},

			openMap(lon, lat) {
				this.asb()
				console.log("获取经纬度ssssfff", lon, lat);
				//打开地图，并将门店位置传入
				uni.getLocation({
					success: res => {
						// res.latitude=lat;
						// res.longitude=lon;
						console.log('location success', parseFloat(lat), parseFloat(lon))
						uni.openLocation({
							latitude: parseFloat(lat),
							longitude: parseFloat(lon),
							scale: 18
						})
					}
				})
			},
		}
	}
</script>

<style>
	@font-face {
		font-family: 'iconfont';
		/* Project id 3183672 */
		src: url('//at.alicdn.com/t/font_3183672_bvb1ihrvzk.woff2?t=1647581154547') format('woff2'),
			url('//at.alicdn.com/t/font_3183672_bvb1ihrvzk.woff?t=1647581154547') format('woff'),
			url('//at.alicdn.com/t/font_3183672_bvb1ihrvzk.ttf?t=1647581154547') format('truetype');
	}

	.iconfont {
		font-family: "iconfont" !important;
		font-size: 18px;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-webkit-text-stroke-width: 0.2px;
		-moz-osx-font-smoothing: grayscale;
		margin-right: 10px;
	}
</style>

<style>
	#xiangqing {
		width: 100%;
		height: 100%;
		background-color: #f3f1f4;
		overflow-x: hidden;
	}



	.top_x,
	.main_x,
	.foot_x {
		width: 100%;
		background-color: #fff;
		margin-bottom: 10px;
	}

	.top_x {
		position: relative;
		height: 230px;
		padding: 10px 0 0 0;
	}

	.top_x>view {
		width: 100%;
	}

	.top_x>view:nth-child(1) {
		height: 80px;
		width: 95%;
		display: flex;
		justify-content: center;
		padding-left: 10px;
	}

	.top_x>view:nth-child(1) view:nth-child(1) {
		width: 75%;
		display: flex;
		flex-direction: column;
	}

	.top_x>view:nth-child(1) view:nth-child(2) {
		background-color: #19BE6B;
		text-align: center;
		border-radius: 10px;
	}

	.top_x>view:nth-child(1) view:nth-child(2) image {
		width: 80px;
		height: 80px;
		border-radius: 10px;
	}

	.top_x>view:nth-child(2) {
		height: 84px;
		width: 95%;
		margin: 0 10px 10px 10px;
		padding-left: 10px;
	}

	.zb {
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 10px;
	}

	.sz {
		font-size: 13px;
	}

	.jz {
		font-size: 13px;
		color: #8b8b8b;
	}

	.jz {
		font-size: 13px;
		color: #8b8b8b;
		height: 38.5%;
		width: 88%;
	}

	.sse {
		color: #656565;
	}

	.top_x>view:nth-child(3) {
		border-top: 1px solid #f4f4f4;

		position: absolute;
		bottom: 0px;
		height: 45px;
	}

	.top_x>view:nth-child(1) p:nth-child(2) {
		color: #6e3002;
		width: 50px;
		background-color: #eac788;
		font-size: 12px;
		text-align: center;
		border-radius: 20px;
	}

	.dibudaohang {
		display: flex;
		justify-content: center;
		flex-direction: column;
	}

	.dibudaohang view {
		width: 100%;
		text-align: center;
	}

	.brse {
		line-height: 230%;
	}




	.main_x {
		height: 20%;
		width: 95%;
		display: flex;
		justify-content: center;
		flex-direction: column;
		padding: 0 20px 0 20px;
	}

	.top_main {
		height: 30%;
		width: 100%;
		font-size: 15px;
		display: flex;
		justify-content: center;
		flex-direction: column;
	}

	.foot_main {
		height: 70%;
		width: 97%;
	}

	.kuangimgs {
		overflow: hidden;
		overflow-x: scroll;
		width: 100%;
		height: 90px;
		display: flex;
		float: left;
	}

	.kuang {
		width: 90px;
		height: 90px;
		margin-right: 10px;
		border-radius: 10%;
		background-color: #303133;
	}

	.kuang>image {
		width: 90px;
		height: 90px;
		border-radius: 10%;
		object-fit: fill;
		background-size: cover;
	}


	.foot_x {
		height: 35%;
		width: 100%;
		display: flex;
		justify-content: center;
		flex-direction: column;
		padding: 0 15px 0 15px;
	}

	.foot_x>view {
		height: 50px;
		border-bottom: 1px solid #f1f1f1;
		display: flex;
		justify-content: center;
		flex-direction: column;
	}

	.foot_x>view:nth-child(5) {
		border-bottom: none;
	}

	.liaojie>view {
		display: flex;
		justify-content: space-between;
	}

	.liaojie>view>i:nth-child(1) {
		font-size: 14px;
	}

	.liaojie>view>i:nth-child(2) {
		font-size: 14px;
		color: #acacac;
	}

	.liaojiec {
		display: flex;
		justify-content: center;
		flex-direction: column;
		text-align: center;
		color: #afafaf;
		font-size: 14px;
	}

	.nbu {
		width: 91%;
	}
</style>
